import styled from "@emotion/styled"
import { AccountItem } from "./AccountItem"
import { memo } from "react"
// import { verifyAtom } from "@/pages/AccountPage/atoms/verify"
import { resolveAssetImage } from "@/utils/common"
import { useCard } from "@/features/business/AccountPage/useCard"
// import ResetPassword from "@/pages/AccountPage/components/Models/ResetPassword"
interface CardProps {
    userInfo: ApiTypes.Fetcher.Result.NewUserInfo
}

const CardBox = styled.div`
    background: #f5f5f5;
    border-radius: 8rem;
    display: flex;
    flex-direction: column;
    padding: 8rem 12rem;
`

export interface KycButton {
    text: string
    onClick: () => void
}

export interface KycContentBase {
    value?: string
    showArrow?: boolean
    onClick?: () => void
}

export interface KycContentWithButton extends KycContentBase {
    rightButton: KycButton
}

export type KycContent = KycContentBase | KycContentWithButton

const Card = memo(
    ({ userInfo }: CardProps) => {
        const {
            hasEmail,
            emailValue,
            phoneNumberValue,
            passwordValue,
            kycContent,
            handleUserName,
            handleEmailClick,
            handlePhoneClick,
            handlePassword,
        } = useCard({ userInfo })

        return (
            <>
                <CardBox>
                    <AccountItem
                        icon={resolveAssetImage("pages/AccountPage/item/user.webp")}
                        label="Username"
                        value={userInfo?.nick_name}
                        onClick={() => handleUserName()}
                    />
                    <AccountItem
                        icon={resolveAssetImage("pages/AccountPage/item/union.webp")}
                        label="ID"
                        value={userInfo?.uid}
                        showArrow={false}
                    />
                    <AccountItem
                        icon={resolveAssetImage("pages/AccountPage/item/kyc.webp")}
                        label="KYC"
                        // showArrow={false}
                        // value={userInfo.kycStatus}
                        // showArrow={kycStatus === 3}
                        status={userInfo?.kycStatus}
                        {...(kycContent as KycContent)}
                    />
                    <AccountItem
                        icon={resolveAssetImage("pages/AccountPage/item/pwd.webp")}
                        label="Login password"
                        value={passwordValue}
                        needBorder={false}
                        onClick={handlePassword}
                    />
                </CardBox>
                <CardBox style={{ marginTop: "8rem" }}>
                    <AccountItem
                        icon={resolveAssetImage("pages/AccountPage/item/phone.webp")}
                        label="Phone number"
                        needBorder={false}
                        value={phoneNumberValue}
                        onClick={handlePhoneClick}
                    />
                    {/* <AccountItem
                        icon={resolveAssetImage("pages/AccountPage/item/email.webp")}
                        needBorder={false}
                        label="Email"
                        value={emailValue}
                        onClick={handleEmailClick}
                    /> */}
                </CardBox>
                {/* <CardBox style={{ marginTop: "8rem" }}>
                    <AccountItem
                        icon={resolveAssetImage("pages/AccountPage/item/facebook.webp")}
                        label="Facebook"
                        value="Linked"
                    />
                    <AccountItem
                        icon={resolveAssetImage("pages/AccountPage/item/google.webp")}
                        needBorder={false}
                        label="Google"
                        value="Linked"
                    />
                </CardBox> */}
            </>
        )
    },
    (prevProps, nextProps) => {
        return JSON.stringify(prevProps.userInfo) === JSON.stringify(nextProps.userInfo)
    },
)
export { Card }
